<template>
  <div>
    <!-- 第一行：top3News
    <el-row justify="center" type="flex">
      <el-col :span="20">
        <top3News></top3News>
      </el-col>
    </el-row> -->
    <!-- 第二行：Carousel+top10News -->
    <el-row justify="center" :gutter="40" type="flex" style="margin-top: 10px">
      <el-col :span="16">
        <carousel :carouselItems="carouselItems"></carousel>
      </el-col>
      <el-col :span="8">
        <top10News :top10News="Top10News"></top10News>
      </el-col>
    </el-row>

    <!-- 第三行：左右广告图片
    <el-row justify="center" :gutter="40" type="flex" style="margin-top: 10px;height:90px">
      <el-col :span="16">
        <el-row>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/bainianfendoulu.jpg"
              alt=""
            />
          </a>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/tuopingongjian.jpg"
              alt=""
            />
          </a>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/minzupinpai.jpg"
              alt=""
            />
          </a>
        </el-row>
      </el-col>
      <el-col :span="8">
          <el-row>
          <a href="#">
            <img
              src="../../assets/frontdesk/images/gongkao.jpg"
              alt=""
              style="width:100%;height:90px;"
            />
          </a>
          
        </el-row>
      </el-col>
    </el-row> -->

    <!-- 第四行：新闻分类及新闻主体内容、小牛说事家园、关注我们-->
    <el-row justify="center" :gutter="40" type="flex" style="margin-top: 10px">
      <el-col :span="16">
        <!-- 主体内容区左侧 -->
        <!-- <indexnewscategoryandnews  :newsCategory="newsCategory" :news="newsByNewsCategoryId" style="margin-bottom:5%;"></indexnewscategoryandnews> -->
        <newsCategoryContentNews :newsCategoryName="newsCategory.name" v-bind:news="newsByNewsCategoryId" style="margin-bottom:5%;"></newsCategoryContentNews>
  

      </el-col>
      <el-col :span="8">
        <!-- 主体内容区右侧 -->
        <!-- 第一行banyuetanjiayuan -->
        <el-row>
          <banyuetanjiayuan style="padding:20px;"></banyuetanjiayuan>
        </el-row>
        <!-- 第二行contackUs -->
        <el-row>
          <contackUs style="padding:20px;"></contackUs>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import top3News from "./top3News.vue";
import top10News from "./top10News.vue";
import banyuetanjiayuan from "./banyuetanjiayuan.vue";
import contackUs from "./contackUs.vue";
import newsCategoryContentNews from "./newsCategoryContentNews.vue";
import indexnewscategoryandnews from "./indexnewscategoryandnews.vue"



import carousel from "./carousel.vue";
import News from "@/api/News.js";
import NewsCategory from "@/api/NewsCategory.js"
let news=new News();
let newsCategory=new NewsCategory();


export default {
  components: {
    top3News,
    carousel,
    top10News,
    banyuetanjiayuan,
    contackUs,
    newsCategoryContentNews,
    indexnewscategoryandnews
  },
  data(){
    return{
      newsCategoryId:"",
      carouselItems:[],//Carousel数据
      Top10News:[],

      newsCategory:{},
      newsByNewsCategoryId:[]
    }
  },
  methods:{
    async GetNewsCategoryCarousels(newsCategoryId){
      const response=await news.GetCarousel6NewsByNewsCategoryId(newsCategoryId)
      return (response).data
    },
    async GetNewsCategory(newsCategoryId){
      const response=await newsCategory.getNewsCategory(newsCategoryId)
      return (response).data
    },
    async GetNewsCategoryTop10News(){
      const response=(await news.GetTop6NewsByNewsCategoryId(this.newsCategoryId,10))
      return response.data
      
    },
    async GetNewsByCategoryId(newsCategoryId){
      const response=(await news.GetNewsByNewsCategoryId(newsCategoryId))
      return response.data
      
    },

  },
  async mounted(){
    this.$nextTick(async function(){
      // 通过路由拿到当前newsCategoryId
    this.newsCategoryId=this.$route.params.id;

     // 在绑定元素之前加载好相应的信息：从父组件向子组件传值
    // carousel
    this.carouselItems=(await this.GetNewsCategoryCarousels(this.newsCategoryId))
    // console.log(this.carouselItems);

     // top10News
    this.Top10News=(await this.GetNewsCategoryTop10News())

    this.newsCategory=(await this.GetNewsCategory(this.newsCategoryId))

    this.newsByNewsCategoryId=(await this.GetNewsByCategoryId(this.newsCategoryId))
    })
    console.log(this.newsByNewsCategoryId);
    
  }
};
</script>